<template>
  <div v-if="isbottom == 1" class="bottomnav" >
    <ul class="bottomnav-ul">
      <li v-for="item in lidata" :key="item.index" :class="{active:bottomActive==item.index}"  @click="changeClass(item)">
        <span style="display:block;font-size: 0.5rem;" :class="[item.icon]" class="icon iconfont "></span>
        <span style="display:block;font-size: 0.1rem;"> {{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
export default {
  name: 'Bottomnav',
  data () {
    return {
      lidata: [
        {index: 0, name: '练习', icon: 'icon-lianxi', path: '/home'},
        {index: 1, name: '视频', icon: 'icon-shipin', path: '/video'},
        {index: 2, name: '我的', icon: 'icon-wode', path: '/counter'}
      ]
    }
  },
  computed: {
    ...mapState([
      'bottomActive', 'isbottom'
    ])
  },
  created () {
    var path = this.$route.path
    this.INI_BOTTOMNAV(path)
  },
  methods: {
    ...mapMutations([
      'SET_BOTTOMNAV', 'INI_BOTTOMNAV', 'SET_ISBOTTOM'
    ]),
    changeClass (item) {
      this.SET_BOTTOMNAV(item.index)
      this.$router.push({path: item.path})
    }
  }
}
</script>

<style scoped>
  .bottomnav{
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: white;
    border-top:solid 1px darkgray;
  }
  .bottomnav-ul{
    list-style:none; /* 去掉ul前面的符号 */
    margin: 0px; /* 与外界元素的距离为0 */
    padding: 0px; /* 与内部元素的距离为0 */
    width: auto; /* 宽度根据元素内容调整 */
    display: flex;
  }
  .bottomnav-ul >li{
    list-style:none;
    float:left;
    height: 0.9rem;
    flex-basis:33.33%;
    margin: 0.03rem  0 0.01rem 0;
    display: list-item;
  }
  .active span{
     color: #4b82d9;
  }
</style>
